<template>
  <section class="p-10">
      <span>工单：</span>
      <div class="selectbox">
         <el-select v-model="value" placeholder="请选择或输入" filterable :filter-method="dataFilter" @change="Change" :disabled="isdisable">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </div>
     <button @click="lockClick" class="lockClass" :class="{lockActive:isactive}">{{isLock}}</button>
  </section>
</template>
<script>
  export default {
    name: 'PackSelector',
    data() {
      return {
        isdisable: false,
        isLock: '锁定',
        isactive: false,
        optionsCopy: [{
          value: '1',
          label: 'meat',
          number: '00000001',
          state: 'OK'
        }, {
          value: '2',
          label: 'drink',
          number: '00000002',
          state: 'OK'
        }, {
          value: '3',
          label: 'food',
          number: '00000003',
          state: 'NG'
        }, {
          value: '4',
          label: '龙须面',
          number: '00000004',
          state: 'NG'
        }, {
          value: '5',
          label: '北京烤鸭',
          number: '00000005',
          state: 'NG'
        }, {
          value: '6',
          label: 'Mss',
          number: '00000006',
          state: 'NG'
        },{
          value: '7',
          label: 'fdds',
          number: '00000007',
          state: 'NG'
        }],
        options: [{
          value: '1',
          label: 'meat',
          number: '00000001',
          state: 'OK'
        }, {
          value: '2',
          label: 'drink',
          number: '00000002',
          state: 'OK'
        }, {
          value: '3',
          label: 'food',
          number: '00000003',
          state: 'NG'
        }, {
          value: '4',
          label: '龙须面',
          number: '00000004',
          state: 'NG'
        }, {
          value: '5',
          label: '北京烤鸭',
          number: '00000005',
          state: 'NG'
        }, {
          value: '6',
          label: 'Mss',
          number: '00000006',
          state: 'NG'
        },{
          value: '7',
          label: 'fdds',
          number: '00000007',
          state: 'NG'
        }],
        value: '',
        ptNum: '',
        itemMess: ''
      };
    },
    methods: {
      dataFilter(val) {
        this.value = val;
        if (val) { //val存在
          this.options = this.optionsCopy.filter((item) => {
            if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) {
              return true
            }
          })
        } else { //val为空时，还原数组
          this.options = this.optionsCopy;
        }
      },
      Change(val) {
        let this_ = this;
        // if(this.isLock) {
        //     this.isLock='解锁'
        //     this.isactive = true
        //     this.isdisable = true
        // }
        if(this.itemMess == 'OK') {
            // alert(1+this.itemMess)
            this.isLock='解锁'
            this.isactive = true
            this.isdisable = true
        }else{
          //  alert(2+this.itemMess)
            this.isLock='锁定'
            this.isactive = false
            this.isdisable = false
        }
          this_.optionsCopy.forEach((item) => {
              if(item.value === `${val}`){
                this_.$emit('fun_num',item.number,item.state)
              }
          })
      },
      lockClick () {
        if (this.isLock){
          this.isLock=='锁定' ? this.isLock='解锁' : this.isLock='锁定'
          this.isactive = !this.isactive
          this.isdisable = !this.isdisable
        }
      },
      getPallets (item) {
        this.itemMess = item;
        this.Change();
        console.log('item',item)
        console.log('itemMess',this.itemMess)
      }
    },
    updated () {
       const input = document.getElementsByClassName('el-input__inner')[0];
       input.removeAttribute('readonly');
    }
  };
</script>

<style scoped>
    .selectbox{
      width: 100%;
      box-sizing: border-box;
      padding-left: 80px;
      padding-right: 100px;
    }
    .selectbox>>>.el-select{
        width: 100%;
    }
    span{
        display: block;
        color: #333;
        font-size: 1rem;
        font-weight: 400;
        float: left;
        height: 40px;
        line-height: 40px;
    }
    section{
      position: relative;
    }
    .lockClass{
        position: absolute;
        top: 34px;
        right: 0px;
        width: 70px;
        height: 30px;
        background-color: rgb(82, 165, 241);
        border: 1px solid rgb(41, 112, 179);
        color: #fff;
        border-radius: 4px;
        font-size: 1em;
        z-index: 999;
    }
     .lockActive{
        background-color: rgb(180, 194, 206);
        border-color: rgb(165, 179, 190);
     }
</style>